<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeJudge - 在线编程评测系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        }
        .tab-active {
            border-bottom: 3px solid #667eea;
            color: #667eea;
        }
        .difficulty-easy { color: #10b981; }
        .difficulty-medium { color: #f59e0b; }
        .difficulty-hard { color: #ef4444; }
        .status-AC { color: #10b981; }
        .status-WA { color: #ef4444; }
        .status-TLE { color: #f59e0b; }
        .status-CE { color: #8b5cf6; }
        .animate-pulse-slow {
            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-8">
                    <div class="flex items-center space-x-2">
                        <i class="ri-code-s-slash-line text-2xl text-purple-600"></i>
                        <span class="text-xl font-bold text-gray-800">CodeJudge</span>
                    </div>
                    <div class="hidden md:flex space-x-6">
                        <a href="#problems" class="nav-link text-gray-600 hover:text-purple-600 transition">题目</a>
                        <a href="#contests" class="nav-link text-gray-600 hover:text-purple-600 transition">比赛</a>
                        <a href="#submissions" class="nav-link text-gray-600 hover:text-purple-600 transition">提交</a>
                        <a href="#ranklist" class="nav-link text-gray-600 hover:text-purple-600 transition">排行榜</a>
                        <a href="#discuss" class="nav-link text-gray-600 hover:text-purple-600 transition">讨论</a>

<!--                   111     此处均为待补全数据-->
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索题目..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:border-purple-500 w-64">
                        <i class="ri-search-line absolute left-3 top-3 text-gray-400"></i>
                    </div>
                    <button class="relative p-2 text-gray-600 hover:text-purple-600">
                        <i class="ri-notification-3-line text-xl"></i>
                        <span class="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full"></span>
                    </button>
                    <div class="flex items-center space-x-2 cursor-pointer">
                        <img src="https://picsum.photos/seed/user1/40/40" alt="用户头像" class="w-10 h-10 rounded-full">
                        <span class="text-gray-700 font-medium">张三</span>
                        <i class="ri-arrow-down-s-line text-gray-500"></i>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 欢迎横幅 -->
        <section class="gradient-bg rounded-2xl p-8 mb-8 text-white">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-4xl font-bold mb-4">欢迎来到 CodeJudge</h1>
                    <p class="text-xl mb-6 opacity-90">提升编程技能，挑战算法极限</p>
                    <div class="flex space-x-4">
                        <button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
                            开始刷题
                        </button>
                        <button class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition">
                            查看比赛
                        </button>
                    </div>
                </div>
                <div class="hidden lg:block">
                    <i class="ri-code-box-line text-8xl opacity-50"></i>
                </div>
            </div>
        </section>

        <!-- 统计数据 -->
        <section class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl p-6 card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">总题目数</p>
                        <p class="text-3xl font-bold text-gray-800">2,847</p>
                        <p class="text-green-500 text-sm mt-1">
                            <i class="ri-arrow-up-line"></i> +125 本月新增
                        </p>
                    </div>
                    <div class="bg-purple-100 p-3 rounded-lg">
                        <i class="ri-book-2-line text-2xl text-purple-600"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl p-6 card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">总用户数</p>
                        <p class="text-3xl font-bold text-gray-800">15,623</p>
                        <p class="text-green-500 text-sm mt-1">
                            <i class="ri-arrow-up-line"></i> +892 本月新增
                        </p>
                    </div>
                    <div class="bg-blue-100 p-3 rounded-lg">
                        <i class="ri-user-3-line text-2xl text-blue-600"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl p-6 card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">总提交数</p>
                        <p class="text-3xl font-bold text-gray-800">1.2M</p>
                        <p class="text-green-500 text-sm mt-1">
                            <i class="ri-arrow-up-line"></i> +45K 今日提交
                        </p>
                    </div>
                    <div class="bg-green-100 p-3 rounded-lg">
                        <i class="ri-send-plane-2-line text-2xl text-green-600"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl p-6 card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">通过率</p>
                        <p class="text-3xl font-bold text-gray-800">68.5%</p>
                        <p class="text-red-500 text-sm mt-1">
                            <i class="ri-arrow-down-line"></i> -2.3% 较上周
                        </p>
                    </div>
                    <div class="bg-orange-100 p-3 rounded-lg">
                        <i class="ri-bar-chart-2-line text-2xl text-orange-600"></i>
                    </div>
                </div>
            </div>
        </section>

        <!-- 主要内容标签页 -->
        <section class="bg-white rounded-xl shadow-lg">
            <div class="border-b">
                <div class="flex space-x-8 px-6">
                    <button class="py-4 font-semibold tab-active" onclick="switchTab('problems')">题目列表</button>
                    <button class="py-4 font-semibold text-gray-600 hover:text-purple-600" onclick="switchTab('contests')">进行中的比赛</button>
                    <button class="py-4 font-semibold text-gray-600 hover:text-purple-600" onclick="switchTab('submissions')">最新提交</button>
                    <button class="py-4 font-semibold text-gray-600 hover:text-purple-600" onclick="switchTab('ranklist')">排行榜</button>
                </div>
            </div>

            <!-- 题目列表内容 -->
            <div id="problems-content" class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <div class="flex space-x-4">
                        <select class="px-4 py-2 border rounded-lg focus:outline-none focus:border-purple-500">
                            <option>所有难度</option>
                            <option>简单</option>
                            <option>中等</option>
                            <option>困难</option>
                        </select>
                        <select class="px-4 py-2 border rounded-lg focus:outline-none focus:border-purple-500">
                            <option>所有标签</option>
                            <option>数组</option>
                            <option>字符串</option>
                            <option>动态规划</option>
                            <option>图论</option>
                        </select>
                    </div>
                    <div class="flex space-x-2">
                        <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">
                            <i class="ri-refresh-line"></i>
                        </button>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-gray-600 border-b">
                                <th class="pb-3">状态</th>
                                <th class="pb-3">题号</th>
                                <th class="pb-3">标题</th>
                                <th class="pb-3">难度</th>
                                <th class="pb-3">通过率</th>
                                <th class="pb-3">提交数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b hover:bg-gray-50 cursor-pointer">
                                <td class="py-4">
                                    <i class="ri-checkbox-circle-fill text-green-500"></i>
                                </td>
                                <td class="py-4 font-mono">1001</td>
                                <td class="py-4">
                                    <a href="#" class="text-blue-600 hover:underline">两数之和</a>
                                </td>
                                <td class="py-4">
                                    <span class="difficulty-easy font-semibold">简单</span>
                                </td>
                                <td class="py-4">52.3%</td>
                                <td class="py-4">128.5K</td>
                            </tr>
                            <tr class="border-b hover:bg-gray-50 cursor-pointer">
                                <td class="py-4">
                                    <i class="ri-checkbox-circle-fill text-green-500"></i>
                                </td>
                                <td class="py-4 font-mono">1002</td>
                                <td class="py-4">
                                    <a href="#" class="text-blue-600 hover:underline">两数相加</a>
                                </td>
                                <td class="py-4">
                                    <span class="difficulty-medium font-semibold">中等</span>
                                </td>
                                <td class="py-4">41.2%</td>
                                <td class="py-4">89.3K</td>
                            </tr>
                            <tr class="border-b hover:bg-gray-50 cursor-pointer">
                                <td class="py-4">
                                    <i class="ri-close-circle-fill text-red-500"></i>
                                </td>
                                <td class="py-4 font-mono">1003</td>
                                <td class="py-4">
                                    <a href="#" class="text-blue-600 hover:underline">无重复字符的最长子串</a>
                                </td>
                                <td class="py-4">
                                    <span class="difficulty-medium font-semibold">中等</span>
                                </td>
                                <td class="py-4">38.7%</td>
                                <td class="py-4">156.2K</td>
                            </tr>
                            <tr class="border-b hover:bg-gray-50 cursor-pointer">
                                <td class="py-4">
                                    <i class="ri-time-line text-gray-400"></i>
                                </td>
                                <td class="py-4 font-mono">1004</td>
                                <td class="py-4">
                                    <a href="#" class="text-blue-600 hover:underline">寻找两个正序数组的中位数</a>
                                </td>
                                <td class="py-4">
                                    <span class="difficulty-hard font-semibold">困难</span>
                                </td>
                                <td class="py-4">35.8%</td>
                                <td class="py-4">67.9K</td>
                            </tr>
                            <tr class="border-b hover:bg-gray-50 cursor-pointer">
                                <td class="py-4">
                                    <i class="ri-time-line text-gray-400"></i>
                                </td>
                                <td class="py-4 font-mono">1005</td>
                                <td class="py-4">
                                    <a href="#" class="text-blue-600 hover:underline">最长回文子串</a>
                                </td>
                                <td class="py-4">
                                    <span class="difficulty-medium font-semibold">中等</span>
                                </td>
                                <td class="py-4">36.5%</td>
                                <td class="py-4">112.4K</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="flex justify-center mt-6 space-x-2">
                    <button class="px-3 py-1 border rounded hover:bg-gray-100">上一页</button>
                    <button class="px-3 py-1 bg-purple-600 text-white rounded">1</button>
                    <button class="px-3 py-1 border rounded hover:bg-gray-100">2</button>
                    <button class="px-3 py-1 border rounded hover:bg-gray-100">3</button>
                    <button class="px-3 py-1 border rounded hover:bg-gray-100">...</button>
                    <button class="px-3 py-1 border rounded hover:bg-gray-100">10</button>
                    <button class="px-3 py-1 border rounded hover:bg-gray-100">下一页</button>
                </div>
            </div>

            <!-- 比赛内容 -->
            <div id="contests-content" class="p-6 hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="border rounded-lg p-6 hover:shadow-lg transition">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-xl font-bold text-gray-800">CodeJudge Round #123</h3>
                                <p class="text-gray-500 mt-1">每周模拟赛</p>
                            </div>
                            <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm font-semibold">进行中</span>
                        </div>
                        <div class="space-y-2 text-sm text-gray-600 mb-4">
                            <p><i class="ri-time-line mr-2"></i>剩余时间: 01:23:45</p>
                            <p><i class="ri-user-line mr-2"></i>参赛人数: 1,234</p>
                            <p><i class="ri-trophy-line mr-2"></i>奖金池: ¥5,000</p>
                        </div>
                        <button class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">
                            立即参加
                        </button>
                    </div>
                    <div class="border rounded-lg p-6 hover:shadow-lg transition">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-xl font-bold text-gray-800">算法训练营选拔赛</h3>
                                <p class="text-gray-500 mt-1">月度资格赛</p>
                            </div>
                            <span class="bg-yellow-100 text-yellow-600 px-3 py-1 rounded-full text-sm font-semibold">即将开始</span>
                        </div>
                        <div class="space-y-2 text-sm text-gray-600 mb-4">
                            <p><i class="ri-time-line mr-2"></i>开始时间: 2025-10-22 20:00</p>
                            <p><i class="ri-user-line mr-2"></i>已报名: 892</p>
                            <p><i class="ri-gift-line mr-2"></i>奖励: 训练营名额</p>
                        </div>
                        <button class="w-full border-2 border-purple-600 text-purple-600 py-2 rounded-lg hover:bg-purple-50 transition">
                            立即报名
                        </button>
                    </div>
                </div>
            </div>

            <!-- 提交记录内容 -->
            <div id="submissions-content" class="p-6 hidden">
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50">
                        <div class="flex items-center space-x-4">
                            <span class="status-AC font-semibold">AC</span>
                            <div>
                                <p class="font-semibold">两数之和</p>
                                <p class="text-sm text-gray-500">提交者: 张三</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-gray-500">2分钟前</p>
                            <p class="text-sm">语言: C++ | 耗时: 12ms | 内存: 8.2MB</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50">
                        <div class="flex items-center space-x-4">
                            <span class="status-WA font-semibold">WA</span>
                            <div>
                                <p class="font-semibold">无重复字符的最长子串</p>
                                <p class="text-sm text-gray-500">提交者: 李四</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-gray-500">5分钟前</p>
                            <p class="text-sm">语言: Python | 耗时: - | 内存: -</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50">
                        <div class="flex items-center space-x-4">
                            <span class="status-TLE font-semibold">TLE</span>
                            <div>
                                <p class="font-semibold">寻找两个正序数组的中位数</p>
                                <p class="text-sm text-gray-500">提交者: 王五</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-gray-500">8分钟前</p>
                            <p class="text-sm">语言: Java | 耗时: >2000ms | 内存: 45.3MB</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 排行榜内容 -->
            <div id="ranklist-content" class="p-6 hidden">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-gray-600 border-b">
                                <th class="pb-3">排名</th>
                                <th class="pb-3">用户</th>
                                <th class="pb-3">Rating</th>
                                <th class="pb-3">解题数</th>
                                <th class="pb-3">通过率</th>
                                <th class="pb-3">最近活动</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b hover:bg-gray-50">
                                <td class="py-4">
                                    <span class="inline-flex items-center justify-center w-8 h-8 bg-yellow-400 text-white rounded-full font-bold">1</span>
                                </td>
                                <td class="py-4">
                                    <div class="flex items-center space-x-2">
                                        <img src="https://picsum.photos/seed/top1/32/32" alt="头像" class="w-8 h-8 rounded-full">
                                        <span class="font-semibold">AlgorithmMaster</span>
                                    </div>
                                </td>
                                <td class="py-4 font-bold text-purple-600">2847</td>
                                <td class="py-4">2,156</td>
                                <td class="py-4">89.3%</td>
                                <td class="py-4 text-gray-500">刚刚</td>
                            </tr>
                            <tr class="border-b hover:bg-gray-50">
                                <td class="py-4">
                                    <span class="inline-flex items-center justify-center w-8 h-8 bg-gray-400 text-white rounded-full font-bold">2</span>
                                </td>
                                <td class="py-4">
                                    <div class="flex items-center space-x-2">
                                        <img src="https://picsum.photos/seed/top2/32/32" alt="头像" class="w-8 h-8 rounded-full">
                                        <span class="font-semibold">CodeNinja</span>
                                    </div>
                                </td>
                                <td class="py-4 font-bold text-purple-600">2756</td>
                                <td class="py-4">2,089</td>
                                <td class="py-4">87.6%</td>
                                <td class="py-4 text-gray-500">5分钟前</td>
                            </tr>
                            <tr class="border-b hover:bg-gray-50">
                                <td class="py-4">
                                    <span class="inline-flex items-center justify-center w-8 h-8 bg-orange-600 text-white rounded-full font-bold">3</span>
                                </td>
                                <td class="py-4">
                                    <div class="flex items-center space-x-2">
                                        <img src="https://picsum.photos/seed/top3/32/32" alt="头像" class="w-8 h-8 rounded-full">
                                        <span class="font-semibold">ProblemSolver</span>
                                    </div>
                                </td>
                                <td class="py-4 font-bold text-purple-600">2689</td>
                                <td class="py-4">1,956</td>
                                <td class="py-4">85.2%</td>
                                <td class="py-4 text-gray-500">12分钟前</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- 热门题目推荐 -->
        <section class="mt-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">热门题目推荐</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg p-6 hover:shadow-lg transition cursor-pointer">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-green-100 text-green-600 px-2 py-1 rounded text-sm">简单</span>
                        <i class="ri-fire-fill text-orange-500"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">斐波那契数列</h3>
                    <p class="text-gray-600 text-sm mb-4">经典的动态规划入门题目，适合新手练习</p>
                    <div class="flex justify-between items-center text-sm text-gray-500">
                        <span><i class="ri-user-line mr-1"></i>15.2K 已解决</span>
                        <span><i class="ri-star-line mr-1"></i>4.8</span>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-6 hover:shadow-lg transition cursor-pointer">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-yellow-100 text-yellow-600 px-2 py-1 rounded text-sm">中等</span>
                        <i class="ri-fire-fill text-orange-500"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">二叉树的层序遍历</h3>
                    <p class="text-gray-600 text-sm mb-4">考察树的遍历和队列的应用</p>
                    <div class="flex justify-between items-center text-sm text-gray-500">
                        <span><i class="ri-user-line mr-1"></i>8.9K 已解决</span>
                        <span><i class="ri-star-line mr-1"></i>4.6</span>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-6 hover:shadow-lg transition cursor-pointer">
                    <div class="flex justify-between items-start mb-4">
                        <span class="bg-red-100 text-red-600 px-2 py-1 rounded text-sm">困难</span>
                        <i class="ri-fire-fill text-orange-500"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">编辑距离</h3>
                    <p class="text-gray-600 text-sm mb-4">经典的字符串动态规划问题</p>
                    <div class="flex justify-between items-center text-sm text-gray-500">
                        <span><i class="ri-user-line mr-1"></i>3.2K 已解决</span>
                        <span><i class="ri-star-line mr-1"></i>4.9</span>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-16">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="ri-code-s-slash-line text-2xl"></i>
                        <span class="text-xl font-bold">CodeJudge</span>
                    </div>
                    <p class="text-gray-400">专业的在线编程评测平台，助力程序员成长</p>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition">关于我们</a></li>
                        <li><a href="#" class="hover:text-white transition">使用指南</a></li>
                        <li><a href="#" class="hover:text-white transition">API文档</a></li>
                        <li><a href="#" class="hover:text-white transition">常见问题</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">社区</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition">讨论区</a></li>
                        <li><a href="#" class="hover:text-white transition">博客</a></li>
                        <li><a href="#" class="hover:text-white transition">贡献者</a></li>
                        <li><a href="#" class="hover:text-white transition">赞助商</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">关注我们</h4>
                    <div class="flex space-x-4 mb-4">
                        <a href="#" class="text-gray-400 hover:text-white transition text-xl">
                            <i class="ri-github-fill"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-xl">
                            <i class="ri-twitter-fill"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-xl">
                            <i class="ri-wechat-fill"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-xl">
                            <i class="ri-qq-fill"></i>
                        </a>
                    </div>
                    <p class="text-gray-400">订阅获取最新题目和比赛信息</p>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2025 CodeJudge. All rights reserved. |
                    <a href="#" class="hover:text-white">隐私政策</a> |
                    <a href="#" class="hover:text-white">服务条款</a>
                </p>
            </div>
        </div>
    </footer>

    <script>
        // 标签页切换功能
        function switchTab(tabName) {
            // 隐藏所有内容
            document.querySelectorAll('[id$="-content"]').forEach(content => {
                content.classList.add('hidden');
            });

            // 移除所有标签的激活状态
            document.querySelectorAll('.tab-active').forEach(tab => {
                tab.classList.remove('tab-active');
                tab.classList.add('text-gray-600');
            });

            // 显示选中的内容
            document.getElementById(tabName + '-content').classList.remove('hidden');

            // 激活选中的标签
            event.target.classList.add('tab-active');
            event.target.classList.remove('text-gray-600');
        }

        // 模拟实时更新时间
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });

            // 更新页面上的时间显示（如果有）
            const timeElements = document.querySelectorAll('.current-time');
            timeElements.forEach(el => {
                el.textContent = timeString;
            });
        }

        // 每秒更新时间
        setInterval(updateTime, 1000);

        // 搜索功能
        document.querySelector('input[placeholder="搜索题目..."]').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchTerm = this.value.trim();
                if (searchTerm) {
                    console.log('搜索:', searchTerm);
                    // 这里可以添加实际的搜索逻辑
                }
            }
        });

        // 添加平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 模拟通知提示
        setTimeout(() => {
            const notification = document.createElement('div');
            notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg animate-pulse-slow z-50';
            notification.innerHTML = '<i class="ri-check-line mr-2"></i>恭喜！您已通过 "两数之和" 题目';
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.remove();
            }, 5000);
        }, 3000);
    </script>
</body>
</html>
